<template>
    <div ref="main" id="box"> </div>
</template>
<script setup>
    import * as echarts from 'echarts/core';
    import { LineChart } from 'echarts/charts';
    import {
        TitleComponent,
        TooltipComponent,
        LegendComponent,
        GridComponent,
    } from 'echarts/components';
    import { CanvasRenderer } from 'echarts/renderers';
    import { onMounted, onUnmounted, ref } from "vue"
    import { getReports } from "@/tools/ajax"
    import { ElMessage } from "element-plus"
    echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        LineChart,
        CanvasRenderer,
        LegendComponent
    ]);
    let myChart;
    const main = ref(null)
    function mainResize(){
        myChart.resize()
    }
    onMounted(async ()=>{
        console.log(main);
        myChart = echarts.init(main.value);
        var res = await getReports()
        if(res.meta.status != 200) return ElMessage.error(res.meta.msg)
        res.data.series.forEach(item=>{
            item.areaStyle = {}
        })
        res.data.title = { text: "客户来源" }
        res.data.tooltip = {}
        myChart.setOption(res.data);

        window.addEventListener("resize", mainResize)
    })
    onUnmounted(()=>{
        window.removeEventListener("resize", mainResize)
    })
    
</script>
<style scoped lang="scss">
    #box{
        width: 100%;
        height: calc(100vh - 180px);
        /* background-color: antiquewhite; */
    }
</style>